<template>
  <!-- <a-form ref="formRef" name="dynamic_form_item" :model="directoryCode" v-bind="formItemLayoutWithOutLabel"> -->
  <a-form-item
    v-for="(domain, index) in tableData.directoryNameList"
    :key="domain[index]"
    v-bind="index === 0 ? formItemLayout : {}"
    :label="index === 0 ? '所属目录' : ''"
    :rules="{
      required: true,
      message: '请选择叶子目录',
      trigger: 'change',
    }"
  >
    <a-tree-select
      v-model:value="tableData.directoryNameList[index]"
      show-search
      style="width: 90%"
      :field-names="fieldNames"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="请选择"
      allow-clear
      tree-default-expand-all
      :tree-data="dataTree"
      @change="handleChange"
    >
      <template #title="{ directoryName }">
        {{ directoryName }}
      </template>
    </a-tree-select>
    <a v-if="tableData.directoryNameList.length > 1" href="#" style="color: black" :disabled="tableData.directoryNameList.length === 1" @click="removeDomain(index)">删除</a>
  </a-form-item>
  <a-form-item v-bind="formItemLayoutWithOutLabel">
    <a-button type="dashed" style="width: 90%" @click="addDomain">
      <PlusOutlined />
      添加所属目录
    </a-button>
  </a-form-item>
  <!-- </a-form> -->
</template>
<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { TreeHooks } from '@/hooks/TreeStructure/TreeStructureHooks';
  import { getDataAssetDetailHooks } from '@/hooks/DataAssetManagementHooks/getDataAssetDetailHooks';

  //引入hooks
  const { tableData } = getDataAssetDetailHooks();
  const { dataTree } = TreeHooks();

  // 替换 treeNode 中 title,value,children 字段为 dataTree 中对应的字段
  const fieldNames = {
    children: 'children',
    title: 'directoryName',
    value: 'directoryCode',
  };

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };
  const formItemLayoutWithOutLabel = {
    wrapperCol: {
      xs: { span: 24, offset: 0 },
      sm: { span: 20, offset: 4 },
    },
  };
  //删除一行
  const removeDomain = (item: number) => {
    console.log('第几个数', item);

    tableData.directoryNameList.splice(item, 1);
  };
  //添加一行
  const addDomain = async () => {
    tableData.directoryNameList.push('');
  };
  // //保存改变并传值
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);

    console.log(tableData.directoryNameList);
  };
</script>
<style>
  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>
